<!DOCTYPE html>
<html lang=“en”>
<head>
<meta chaset="UTF-8">
<title>todolist</title>
<script src='./vue.js'></script>
</head>
<body>
<div id="app">
<input type='text' v-model="inputValue"/>
<button v-on:click="handleBtn">提交</button>
<ul>
<todo-item v-bind:content="item" 
           v-bind:index="index"
           v-for="(item,index) in list"
           @delete="handleItem">
</todo-item>
</ul>
</div>
<script>
/*
Vue.component("todoItem",{
props:['content'],
 template:"<li>{{content}}</li>",
 })
 */
 var todoItem={
 props:['content','index'],
 template:"<li @click='handleItem'>{{content}}</li>",
 methods:{
 handleItem:function(){
 this.$emit("delete",this.index);
 }
 }
 }
var app=new Vue({
el:'#app',
components:{
todoItem:todoItem},
data:{
list:[],
inputValue:''
},
methods:{
  handleBtn:function(){
  this.list.push(this.inputValue)
  this.inputValue=''
  },
  handleItem:function(index){
  this.list.splice(index,1)
  }
}
})
</script>
</body>